<template>
  <div id="app">
    <header class="topheader">
      <a href="#"  style="color: white; text-decoration: none;" @click="router.push('/profile')">&lt;</a>
      <span>查看消息</span>
    </header>
    <el-container>
      <el-header style="color:white;text-align:center;padding:10px;">
        <el-button type="text" icon="el-icon-back" @click="goBack"></el-button>
        <span>全部消息</span>
      </el-header>
      <el-main>
        <el-card v-for="(msg,index) in messageList" :key="index" class="message-card">
          <div class="message-header">
            <el-avatar :src="msg.avatar" size="small" class="message-avatar"></el-avatar>
            <span class="message-username">{{msg.username}}</span>
            <el-button v-if="msg.action === 'follow'" type="text" size="small" class="action-button" @click="handleFollow(msg)">{{msg.isFollowed? '已关注' : msg.isMutual? '互相关注' : '回关'}}</el-button>
            <el-button v-if="msg.action === 'like'" type="text" size="small" class="action-button" disabled>查看</el-button>
          </div>
          <div class="message-content">
            <span>{{msg.content}}</span>
            <span class="message-time">{{msg.time}}</span>
          </div>
          <div v-if="msg.action === 'like'" class="message-liked-avatar"><el-avatar :src="msg.likedAvatar" size="small"></el-avatar></div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import router from "@/router";

const messageList = ref([
  {
    avatar: 'https://example.com/avatar1.jpg',
    username: '梦回大唐',
    action: 'follow',
    content: '关注了你',
    time: '09 - 14 12:00',
    isFollowed: false,
    isMutual: false
  },
  {
    avatar: 'https://example.com/avatar2.jpg',
    username: '张三的猫',
    action: 'follow',
    content: '关注了你',
    time: '09 - 14 12:00',
    isFollowed: false,
    isMutual: true
  },
  {
    avatar: 'https://example.com/avatar3.jpg',
    username: '阿秋',
    action: 'like',
    content: '赞了你的作品',
    time: '09 - 14 12:00',
    likedAvatar: 'https://example.com/avatar4.jpg'
  }
]);

const goBack = () => {
  console.log('返回上一页');
};

const handleFollow = (msg) => {
  if (!msg.isFollowed) {
    msg.isFollowed = true;
    if (msg.isMutual) {
      msg.action = '已关注';
    } else {
      msg.action = '互相关注';
    }
  }
};
</script>

<style scoped>
#app{font-family:Avenir,Helvetica,Arial,sans - serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;margin-top:60px;}
.message-card{margin:10px;padding:10px;text-align:left;}
.message-header{display:flex;align-items:center;margin-bottom:10px;}
.message-avatar{margin-right:10px;}
.action-button{margin-left:auto;}
.message-content{display:flex;justify-content:space-between;align-items:center;}
.message-time{color:#999;}
.message-liked-avatar{margin-top:10px;}
.topheader {
  background: linear-gradient(to right, #ff69b4, #00bfff);
  color: white;
  text-align: center;
  padding: 10px;
}
</style>